<template>
	<view class="content">
		<image class="bg-set" src="../../static/global-bg.jpg" mode="widthFix"></image>
		<view class="loader">
		</view>
		<view class="logoimg">
			<image class="logo" src="../../static/logo.png"></image>
		</view>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<input type="text" placeholder="账号" class="inputAcc" v-model="username" />
		<input type="password" placeholder="密码" class="input" v-model="password" />
		<view class="btn-group">
			<view class="registerBtn" @click="gotoRegister">还没有账号？立即注册</view>
			<button  class="loginBtn" @click="login">
				登录
			</button>
		</view>
		<tip-modal
			title="提示" 
			:content="tipContent" 
			:modalName="modalName" 
			@hideModal="hideModal"
		></tip-modal>
	</view>
</template>
<script>
	import { mapState,mapMutations } from 'vuex'
	import {loginApi} from '@/api/user.js'
	import TipModal from '@/components/TipModal.vue'
	export default {
		components: {
			TipModal
		},
		data() {
			return {
				title: '和小物一起进入奇妙的心灵之旅',
				password: '',
				username: '',
				modalName: '',
				tipContent: ''
			}
		},
		methods: {
		  login () {
				const password = this.password.trim()
				const username = this.username.trim()
				if(password === '' || username === '') {
					this.tipContent = '请输入用户名和密码'
					this.modalName = 'Modal'
				} else {
					const info = {password, username}
					loginApi(info).then(res => {
						if (res.code === 200) {
							const userInfo = {
								userid: res.data,
								username: username
							}
							console.log('登录页', userInfo)
							this.$store.commit('setUserInfo', userInfo);
							uni.switchTab({
								url: '/pages/home/index'
							})
						} else {
							this.tipContent = res.message
							this.modalName = 'Modal'
						}
					})
				}
			},
			hideModal () {
				this.modalName = ''
			},
			gotoRegister () {
				uni.navigateTo({
					url: '/pages/register/index'
				})
			},
		},
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.input{
		margin: 5% 0rem;
		position: absolute;
		top:50%;
		height:30upx;
		width: 50%;
		color: #fff;
		text-align: center;
		border-bottom: 1px $theme-color solid;
		border-radius: 10upx;
	 }
	.inputAcc{
		margin: 5% 0rem;
	  position: absolute;
		top: 40%;
		height:30upx;
		width: 50%;
		color: #fff;
		text-align: center;
		border-bottom: 1px $theme-color solid;
		border-radius: 10upx;
	}
	.logoimg{
		position: absolute;
		top:155rpx;
		z-index:10;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;	
    border-radius: 100upx;
	}
	.text-area {
		position: absolute;
		top:35%;
		display: flex;
		justify-content: center;
	}
	.title {
		font-size: 25rpx;
		color: #8f8f94;
	}
	.loader {
		z-index:1;
		position: absolute;
		top:130rpx;
		width: 250rpx;
		height: 250rpx;
		border-radius: 50%;
		background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
		animation: animate 1.2s linear infinite;
	}
	@keyframes animate {
		0% {
				transform: rotate(0deg);
		}
		100% {
				transform: rotate(360deg);
		}
	}
	.loader:after {
		content: '';
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
		background: #f1f1f1;
		border: solid white 10px;
		border-radius: 50%;
	}
	.btn-group {
		position: absolute;
		top: 60%;
		.loginBtn{
			background: linear-gradient(to right, #ffe7ba, $theme-color);
			border-radius: 200rpx;
			width: 200rpx;
			color: white;
		}
		.registerBtn {
			margin-bottom: 7%;
			color: #F5F5F5;
			font-size: $uni-font-size-base;
			text-decoration: underline;
		}
	}
</style>
